<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container">
            <el-input @keyup.enter.native="handleFilter"  style="width: 110px;" class="filter-item" placeholder="店铺编号" v-model="listQuery.storeId"></el-input>
            <el-input @keyup.enter.native="handleFilter" style="width: 220px;" class="filter-item" placeholder="订单编号" v-model="listQuery.osn"></el-input>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
        </div>
        <el-table  :data="list" v-loading="listLoading" element-loading-text="给我一点时间"   highlight-current-row style="width: 100%">
            <el-table-column align="center" label="订单编号" width="300">
                <template slot-scope="scope">
                    <span>{{scope.row.osn}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="店铺编号" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.storeid}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="店铺名称" width="300">
                <template slot-scope="scope">
                    <span>{{scope.row.storename}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="订单金额" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.orderamount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="支付金额" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.surplusmoney}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.orderstate | statusFilter">{{scope.row.orderstate | statusDisplayFilter}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="150" >
                <template slot-scope="scope">
                <el-button type="text" v-bind:disabled="scope.row.orderstate!=120"  size="mini" @click="reCaculateBrokerage(scope.row.osn)">补发佣金</el-button>
                
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNumber" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">

            </el-pagination>
    </div>
    </div>
</template>
<script>
import { fetchOrderList, caculateBrokerage } from "@/api/order";
import waves from "@/directive/waves"; // 水波纹指令
export default {
  name: "orderlist",
  directives: {
    waves
  },
  data: function() {
    return {
      listLoading: true,
      list: [],
      total:0,
      listQuery: {
        pageNumber: 1,
        pageSize: 30,
        storeId: 0,
        osn: ""
      }
    };
  },
  filters:{
      statusFilter(status) {
      const statusMap = {
        "20": "info",
        "40": "info",
        "60": "info",
        "80": "info",
        "100": "success",
        "120": "success",
        "140": "danger",
        "160": "info"
      };
      return statusMap[status];
    },
    statusDisplayFilter(status) {
      const statusMap = {
        "20": "等待付款",
        "40": "确认中",
        "60": "已确认",
        "80": "备货中",
        "100": "已发货",
        "120": "已收货",
        "140": "锁定",
        "160": "取消"
      };
      return statusMap[status];
    }
  },
  created: function() {
    this.getList()
  },
  methods: {
    getList() {
        this.listLoading=true;
        fetchOrderList(this.listQuery).then(response=>{
            if(response.data.Code==0){
                this.list = response.data.Data.OrderList;
                this.total = response.data.Data.PageModel.TotalCount;
            }else{
                this.$message({
                    type: "danger",
                    message: response.data.Message
                    });
            }
        })
        this.listLoading=false;
    },
    handleFilter() {
      this.listQuery.pageNumber = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNumber = val;
      this.getList();
    },
    reCaculateBrokerage(osn){
        this.$confirm("用于补发佣金，已经发放的订单不会重新发放，确认是否需要补发佣金?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{
          caculateBrokerage({osn:osn}).then(response=>{
              if(response.data.Code==0){
                  this.$message({
                        type: 'success',
                        message: '发放成功!'
                    });
                    this.getList();
              }else{
                  this.$message({
                    type: "danger",
                    message: response.data.Message
                    });
              }
        })
      })
        
    }
  }
};
</script>